<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>临床路径管理</title>
    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content" style="padding-top: 90px;">
        <div class="header-section">
            <div class="form-horizontal">
                <div class="form-group" style="margin-top: 10px;margin-bottom: 0px;padding-top: 10px;">
                    <label class="control-label col-md-3">出院日期</label>
                    <div class="col-md-4">
                        <div class="input-group input-large custom-date-range">
                            <input type="text" class="form-control dpd1" name="from" id="startTime"
                                   data-date-format="yyyy-mm-dd">
                            <span class="input-group-addon">至</span>
                            <input type="text" class="form-control dpd2" name="to" id="endTime"
                                   data-date-format="yyyy-mm-dd">
                        </div>
                        <span class="help-block">请选择一个出院日期范围</span>
                    </div>
                    <button class="btn btn-primary" onclick="searchData()">查询</button>
                </div>
            </div>

        </div>
        <!--body wrapper start-->
        <div class="wrapper">


            <div th:class="row">

                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            临床路径管理
                            <span class="tools pull-right">
                         <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-2 p-states">
                                            <span class="state-title">医院临床路径总病种数</span>
                                            <h3 id="typeCount"></h3>
                                        </div>
                                        <div class="col-sm-2 p-states">
                                            <span class="state-title">医院临床路径总入组例数</span>
                                            <h3 id="totalCount"></h3>
                                        </div>
                                        <div class="col-sm-2 p-states">
                                            <span class="state-title">入组后完成例数</span>
                                            <h3 id="completeCount"></h3>
                                        </div>
                                        <div class="col-sm-2 p-states">
                                            <span class="state-title">变异例数</span>
                                            <h3 id="variationCount"></h3>
                                        </div>
                                        <div class="col-sm-2 p-states">
                                            <span class="state-title">退出例数</span>
                                            <h3 id="exitCount"></h3>
                                        </div>
                                        <div class="col-sm-2 p-states">
                                            <span class="state-title">未入例数</span>
                                            <h3 id="notCount"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-2 p-states">
                                            <span class="state-title">平均住院日</span>
                                            <h3 id="avgInCount"></h3>
                                        </div>
                                        <div class="col-sm-2 p-states">
                                            <span class="state-title">平均住院费用</span>
                                            <h3 id="avgFee"></h3>
                                        </div>
                                        <div class="col-sm-2 p-states">
                                            <span class="state-title">死亡率</span>
                                            <h3 id="deathRate"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </section>
                </div>


            </div>
            <div th:class="row">


                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            各病种临床路径入组例数
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body" id="chart1" style="height: 600px;">

                        </div>

                    </section>
                </div>
            </div>
            <div th:class="row">


                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            临床路径各组比率
                            <span class="tools pull-right">
                         </span>
                        </header>
                        <div class="panel-body" ID="pie1" style="height: 600px;">
                        </div>

                    </section>
                </div>
            </div>
            <!--body wrapper end-->
        </div>
    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>


<script type="text/javascript">
    $(document).ready(function () {
        $('#startTime').val(getDay(-30));
        $('#endTime').val(getDay(0));
        searchData();
    });

    function searchData() {
        let startTime = $('#startTime').val();
        let endTime = $('#endTime').val();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getClinicalPathway",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    $('#typeCount').text(result.typeCount);
                    $('#totalCount').text(result.totalCount);
                    $('#completeCount').text(result.completeCount);
                    $('#variationCount').text(result.variationCount);
                    $('#exitCount').text(result.exitCount);
                    $('#notCount').text(result.notCount);
                    $('#avgInCount').text(result.avgInCount);
                    $('#avgFee').text(result.avgFee);
                    $('#deathRate').text(result.deathRate);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + JSON.parse(errorMsg));

            }
        });//end ajax

        let myChart = echarts.init(document.getElementById('chart1'));
        myChart.showLoading();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getDiagnosisInfo",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    //alert(JSON.stringify(result));
                    myChart.hideLoading();    //隐藏加载动画
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        dataset: [{
                            dimensions: ['id', 'name', 'value'],
                            source: result
                        }, {
                            transform: {
                                type: 'sort',
                                config: {dimension: 'value', order: 'desc'}
                            }
                        }],
                        xAxis: {
                            type: 'category',
                            axisLabel: {interval: 0, rotate: 30},
                        },
                        yAxis: {},
                        series: {
                            type: 'bar',
                            encode: {x: 'name', y: 'value'},
                            datasetIndex: 1
                        }
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + errorMsg);
                myChart.hideLoading();
            }
        })

        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getCateInfo",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    let pie1 = echarts.init(document.getElementById('pie1'));
                    let option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            right: 10,
                            top: 20,
                            bottom: 20,
                            data: result
                        },
                        series: [
                            {
                                name: '路径名称',
                                type: 'pie',
                                radius: '55%',
                                center: ['40%', '50%'],
                                data: result,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    pie1.setOption(option);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("请求数据失败!" + JSON.parse(errorMsg));
            }
        });//end ajax
    }


</script>
</body>